<template>
    <div>
        	<!-- mobile-menu-area start -->
		<div class="mobile-menu-area">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="mobile-menu">
							<nav id="dropdown">
								<ul>
									<li>
										<a class="active1" href="index.html">
											Home
										</a>
										<ul>
											<li>
												<a href="index.html">
													home version 1
												</a>
											</li>
											<li>
												<a href="index-2.html">
													home version 2
												</a>
											</li>
											<li>
												<a href="index-3.html">
													home version 3
												</a>
											</li>
										</ul>
									</li>
									<li class="active1">
										<a class="active1" href="#">
											Pages
										</a>
										<ul>
											<li>
												<a href="about-us.html">
													about us
												</a>
											</li>
											<li>
												<a href="cart.html">
													cart
												</a>
											</li>
											<li>
												<a href="checkout.html">
													checkout
												</a>
											</li>
											<li>
												<a href="wishlist.html">
													wishlist
												</a>
											</li>
											<li>
												<a href="login.html">
													login
												</a>
											</li>
											<li>
												<a href="register.html">
													register
												</a>
											</li>
											<li>
												<a href="contact.html">
													contact
												</a>
											</li>
											<li>
												<a href="shop-page.html">
													shop page
												</a>
											</li>
											<li>
												<a href="shop-list.html">
													shop list
												</a>
											</li>
											<li>
												<a href="single-product.html">
													single product
												</a>
											</li>
											<li>
												<a href="404.html">
													404 page
												</a>
											</li>
										</ul>
									</li>
									<li class="active1">
										<a class="active1" href="#">
											Blog
										</a>
										<ul>
											<li>
												<a href="blog-page.html">
													blog-page
												</a>
											</li>
											<li>
												<a href="blog-sidebar.html">
													blog left sidebar
												</a>
											</li>
											<li>
												<a href="blog-right-sidebar.html">
													blog right sidebar
												</a>
											</li>
											<li>
												<a href="blog-details.html">
													blog-details
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="about-us.html">
											about us
										</a>
									</li>
									<li>
										<a href="contact.html">
											Contacts
										</a>
									</li>
								</ul>
							</nav>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- mobile-menu-area end -->
		<!-- breadcrumbs start -->
		<div class="breadcrumbs-area breadcrumb-bg ptb-100">
			<div class="container">
				<div class="breadcrumbs text-center">
					<h2 class="breadcrumb-title">
						shopping cart
					</h2>
					<ul>
						<li>
							<a class="active" href="index.html">
								Home
							</a>
						</li>
						<li>
							cart
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- breadcrumbs area end -->
		<!-- shopping-cart-area start -->
		<div class="cart-area ptb-100">
			<div class="container">
				<div class="row">
					<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
						<form action="#">
							<div class="table-content table-responsive">
								<table>
									<thead>
										<tr>
											<th class="product-price">
												images
											</th>
											<th class="product-name">
												Product
											</th>
											<th class="product-price">
												Price
											</th>
											<th class="product-quantity">
												Quantity
											</th>
											<th class="product-subtotal">
												Total
											</th>
											<th class="product-name">
												remove
											</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(item,index) in shopcart" :key="index">
											<td class="product-thumbnail">
												<a href="#">
													<img :src="item.src" alt="">
												</a>
											</td>
											<td class="product-name">
												<a href="#">
													{{item.name}}
												</a>
											</td>
											<td class="product-price">
												<span class="amount">
													${{item.price}}
												</span>
											</td>
											<td class="product-quantity">
												<input v-model="item.quantity" type="number">
											</td>
											<td class="product-subtotal">
												${{item.price*item.quantity}}
											</td>
											<td class="product-remove">
												<a>
													<i @click="remove" class="fa fa-times">
													</i>
												</a>
											</td>
										</tr>
										<!-- <tr>
											<td class="product-thumbnail">
												<a href="#">
													<img src="assets/img/cart/1.jpg" alt="">
												</a>
											</td>
											<td class="product-name">
												<a href="#">
													Product Title
												</a>
											</td>
											<td class="product-price">
												<span class="amount">
													$165.00
												</span>
											</td>
											<td class="product-quantity">
												<input value="1" type="number">
											</td>
											<td class="product-subtotal">
												$165.00
											</td>
											<td class="product-remove">
												<a href="#">
													<i class="fa fa-times">
													</i>
												</a>
											</td>
										</tr>
										<tr>
											<td class="product-thumbnail">
												<a href="#">
													<img src="assets/img/cart/2.jpg" alt="">
												</a>
											</td>
											<td class="product-name">
												<a href="#">
													Product Title
												</a>
											</td>
											<td class="product-price">
												<span class="amount">
													$150.00
												</span>
											</td>
											<td class="product-quantity">
												<input value="1" type="number">
											</td>
											<td class="product-subtotal">
												$150.00
											</td>
											<td class="product-remove">
												<a href="#">
													<i class="fa fa-times">
													</i>
												</a>
											</td>
										</tr> -->
									</tbody>
								</table>
							</div>
						</form>
					</div>
				</div>
				<div class="row mt-50">
					<div class="col-md-7 col-sm-12 col-xs-12">
						<div class="tax-coupon-all">
							<div class="tax-coupon">
								<ul role="tablist">
									<li class="active">
										<a href="#tax" data-toggle="tab">
											Estimate Shipping & Taxe
										</a>
									</li>
									<li>
										<a href="#coupon" data-toggle="tab">
											Discount Coupon
										</a>
									</li>
								</ul>
							</div>
							<div class="tax-coupon-details tab-content">
								<div id="tax" class="shipping-dec tab-pane active">
									<p>
										Enter your destination to get a shipping estimate.
									</p>
									<div class="shipping-form">
										<div class="single-shipping-form">
											<label class="required get">
												country
												<em>
													*
												</em>
											</label>
											<select class="email s-email">
												<option value="">
													United States
												</option>
												<option value="AF">
													Afghanistan
												</option>
												<option value="AX">
													Åland Islands
												</option>
												<option value="AL">
													Albania
												</option>
												<option value="UZ">
													Uzbekistan
												</option>
												<option value="VU">
													Vanuatu
												</option>
												<option value="VA">
													Vatican City
												</option>
												<option value="VE">
													Venezuela
												</option>
												<option value="VN">
													Vietnam
												</option>
												<option value="WF">
													Wallis and Futuna
												</option>
												<option value="EH">
													Western Sahara
												</option>
												<option value="YE">
													Yemen
												</option>
												<option value="ZM">
													Zambia
												</option>
												<option value="ZW">
													Zimbabwe
												</option>
											</select>
										</div>
										<div class="single-shipping-form">
											<label class="required get">
												State/Province
												<em>
													*
												</em>
											</label>
											<select class="email s-email">
												<option value="">
													Please select region
												</option>
												<option value="1">
													Alabama
												</option>
												<option value="61">
													Virginia
												</option>
												<option value="62">
													Washington
												</option>
												<option value="63">
													West Virginia
												</option>
												<option value="64">
													Wisconsin
												</option>
												<option value="65">
													Wyoming
												</option>
											</select>
										</div>
										<div class="single-shipping-form">
											<label class="required get">
												Zip/Postal Code
												<em>
													*
												</em>
											</label>
											<input placeholder="1234567" type="text" required="">
										</div>
										<div class="single-shipping-botton">
											<button type="submit">
												<span>
													Get a Quote
												</span>
											</button>
										</div>
									</div>
								</div>
								<div id="coupon" class="coupon-dec tab-pane">
									<p>
										Enter your coupon code if you have one.
									</p>
									<label class="required get">
										coupon
										<em>
											*
										</em>
									</label>
									<input placeholder="coupon code" required="" type="text">
									<button class="coupon-btn" type="submit">
										Apply Coupon
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-5 col-sm-12 col-xs-12">
						<div class="cart-total">
							<ul>
								<li>
									Subtotal
									<span>
										${{sumprice}}
									</span>
								</li>
								<li class="cart-black">
									Total
									<span>
										${{sumprice}}
									</span>
								</li>
							</ul>
							<div class="cart-total-btn">
								<div class="cart-total-btn1 f-left">
									<a href="#">
										Proceed to checkout
									</a>
								</div>
								<div class="cart-total-btn2 f-right">
									<a href="#">
										Confirm Order
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</template>
<script>
module.exports = {
  data: function () {
    return {};
  },
  computed:{
	  shopcart(){
		  return this.$store.getters.shopcart
	  },
	  sumprice(){
		  let sumprice=0;
		  this.shopcart.forEach((item) => {
			  sumprice+=item.quantity*item.price
		  });
		  return sumprice;
	  }
	  
  },
   methods: {
	   remove(item){
		   let idx=this.shopcart.findIndex(m=>m.id===item.id);
		   this.shopcart.splice(idx,1);
		   this.$store.dispatch('setShopCart',this.shopcart);
	   }
   },
};
</script>
<style scoped>
td img{
	width:80px;
	height: 92px;
}
</style>